<!DOCTYPE HTML>
<html>
<head>
    <title> 搜索表单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
    <link href="/assets/css/prettify.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        code {
            padding: 0px 4px;
            color: #d14;
            background-color: #f7f7f9;
            border: 1px solid #e1e1e8;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <form id="searchForm" class="form-horizontal span24">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">学生编号：</label>
                    <div class="controls">
                        <input type="text" class="control-text" name="id">
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label">学生姓名：</label>
                    <div class="controls">
                        <input type="text" class="control-text" name="stuName">
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label">性别：</label>
                    <div class="controls" >
                        <select name="" id="" name="sex">
                            <option value="">男</option>
                            <option value="">女</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span9">
                    <label class="control-label">入学时间：</label>
                    <div class="controls">
                        <input type="text" class=" calendar" name="startDate"><span> - </span><input name="endDate" type="text" class=" calendar">
                    </div>
                </div>
                <div class="span3 offset2">
                    <button  type="button" id="btnSearch" class="button button-primary">搜索</button>
                </div>
            </div>
        </form>
    </div>
    <div class="search-grid-container">
        <div id="grid"></div>
    </div>
</div>
<script type="text/javascript" src="/assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="/assets/js/bui-min.js"></script>
<script type="text/javascript" src="/assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
<script type="text/javascript" src="/assets/js/prettify.js"></script>
<script type="text/javascript">
    $(function () {
        prettyPrint();
    });
</script>
<script type="text/javascript">
    BUI.use(['common/search','bui/overlay','bui/data'],function (Search,Overlay, Data) {

        var enumObj = {"1":"男","0":"女"},
            Store = Data.Store,
            columns = [
                {title:'学生编号',dataIndex:'id',width:80,renderer:function(v){
                    return Search.createLink({
                        id : 'detail' + v,
                        title : '学生信息',
                        text : v,
                        href : 'detail/example.html'
                    });
                }},
                {title:'帐套名称',dataIndex:'name',width:100},
                {title:'帐套企业',dataIndex:'company_name',width:100,renderer:BUI.Grid.Format.dateRenderer},
                {title:'账号前缀',dataIndex:'user_prefix',width:300},
                {title:'企业logo',dataIndex:'company_logo',width:60,renderer:BUI.Grid.Format.enumRenderer(enumObj)},
                {title:'开户银行',dataIndex:'company_bank',width:100},
                {title:'银行账号',dataIndex:'bank_number',width:100},
                {title:'企业地址',dataIndex:'company_address',width:100},
                {title:'企业电话',dataIndex:'company_phone',width:100},

                {title:'操作',dataIndex:'',width:200,renderer : function(value,obj){
                    var editStr =  Search.createLink({ //链接使用 此方式
                                id : 'edit' + obj.id,
                                title : '编辑学生信息',
                                text : '编辑',
                                href : 'search/edit.html'
                            }),
                            delStr = '<span class="grid-command btn-del" title="删除学生信息">删除</span>';//页面操作不需要使用Search.createLink
                    return editStr + delStr;
                }}
            ],
            store = new Store({
                url : '/org/list_data',
                autoLoad:true, //自动加载数据
                proxy : {//设置请求相关的参数
                    method : 'post',
                    headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' },
                    dataType : 'json', //返回数据的类型
                    limitParam : 'pageSize', //一页多少条记录
                    pageIndexParam : 'pageNum', //页码
                    startParam : 'startNum' //起始记录
                },
                params : { //配置初始请求的参数
                },
                pageSize:10	// 配置分页数目
            }),
            gridCfg = Search.createGridCfg(columns,{
                tbar : {
                    items : [
                        {text : '<i class="icon-plus"></i>新建',btnCls : 'button button-small',handler:function(){alert('新建');}},
                        {text : '<i class="icon-edit"></i>编辑',btnCls : 'button button-small',handler:function(){alert('编辑');}},
                        {text : '<i class="icon-remove"></i>删除',btnCls : 'button button-small',handler : delFunction}
                    ]
                },
                plugins : [BUI.Grid.Plugins.CheckSelection] // 插件形式引入多选表格
            });
        var  search = new Search({
                    store : store,
                    gridCfg : gridCfg
                }),
            grid = search.get('grid');

        //删除操作
        function delFunction(){
            var selections = grid.getSelection();
            delItems(selections);
        }

        function delItems(items){
            var ids = [];
            BUI.each(items,function(item){
                ids.push(item.id);
            });

            if(ids.length){
                BUI.Message.Confirm('确认要删除选中的记录么？',function(){
                    $.ajax({
                        url : '../data/del.php',
                        dataType : 'json',
                        data : {ids : ids},
                        success : function(data){
                            if(data.success){ //删除成功
                                search.load();
                            }else{ //删除失败
                                BUI.Message.Alert('删除失败！');
                            }
                        }
                    });
                },'question');
            }
        }

        //监听事件，删除一条记录
        grid.on('cellclick',function(ev){
            var sender = $(ev.domTarget); //点击的Dom
            if(sender.hasClass('btn-del')){
                var record = ev.record;
                delItems([record]);
            }
        });
    });
</script>

<body>
</html>
